
<div id="app" v-cloak  v-loading="loading" v-loading.fullscreen.lock="fullscreenLoading">
    <header class="el-header" style="height: 60px; text-align: right; font-size: 12px;background: #b3c0d1">
        <h2 style="float: left">push配置测试</h2>
    </header>
    <div style="width: 50%;float: left">
        <div style="height: 20px"></div>

        <el-form ref="form" :model="form" label-width="100px">
            <el-form-item label="推送标题title" style="width: 350px">
                <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="推送内容">
                <el-input v-model="form.content"></el-input>
            </el-form-item>
            <el-form-item label="推送点击落地页url">
                <el-input v-model="form.url"></el-input>
            </el-form-item>
            <el-form-item label="消息中心落地页url">
                <el-input v-model="form.msg_center_url"></el-input>
            </el-form-item>
            <el-form-item label="消息中心显示时间(天)">
                <el-input v-model="form.day"></el-input>
            </el-form-item>
            <el-form-item label="消息中心图片url">
                <el-input v-model="form.icon_url"></el-input>
            </el-form-item>
            <el-form-item style="margin-top:100px" label="cuid接收人">
                <el-checkbox-group v-model="checked" @change="handleChange">

                    <!--<el-checkbox label="php" name="type"></el-checkbox>-->
                    <el-checkbox v-for="item in form.type" :label="item">{{item}}</el-checkbox>

                </el-checkbox-group>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="onSubmit" style="margin-left: 100px">立即推送</el-button>
                <span style="float:right;margin-right: 50px"><a href="http://agroup.baidu.com/share/md/dcc6a76fd86f46b2963a4846198f13b2#%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98">使用说明及常见问题</a></span>
            </el-form-item>
        </el-form>
    </div>

    <div style="width: 50%;float: left">
        <div style="width: 100%;height: 150px;background: #b3b3b3">
            <div style="height: 20px"></div>

            <div style="width:400px;height: 110px;border:1px solid black;border-radius: 15px;margin-left: 15px;background:whitesmoke ">
                <div style="height:40px;margin-top:5px;margin-left: 15px;color: #0000C0;">
                    <span  style="float:left;display:inline-block;height:30px;line-height:30px;margin-top: 5px"> <img style="width: 28px;height: 28px" src="http://mis.xian.baidu.com/carownerMis/static/img/logo.b126ed4.jpg" alt=""></span>
                    <span style="float:left;margin-left:10px;display:inline-block;height:40px;line-height:40px;font-size: 15px"> 百度地图</span>
                </div>
                <div style="margin-left: 25px">
                    <span style="margin-left:3px;display:block;height:25px;">{{form.title}}</span>
                    <span style="margin-left:3px;display:block;height:25px;">{{form.content}}</span>
                </div>
            </div>
        </div>
        <div style="width: 100%;height: 400px;background: #b3b3b3;color: #787878;">
            <div style="width:400px;height: 270px;border:1px solid black;background:whitesmoke;margin-left: 15px;">
                <div style="height:40px;margin-top:20px;margin-left: 15px;">
                    <span style="float:left;margin-left:10px;display:inline-block;height:40px;line-height:40px;font-size: 17px;"> {{form.title}}</span>
                </div>
                <div >
                    <span style="margin-left:28px;display:block;height:25px;font-size: 14px">{{form.content}}</span>
                    <span style="margin-left:25px;display:block;margin-right: 15px; margin-top: 20px" >
                    <img  style="width: 350px;height: 96px" v-bind:src="form.icon_url" alt="">
                </span>
                    <span style="margin-left:25px;display:block;margin-right: 15px; margin-top: 20px" >
                        <span style="float: left;font-size: 14px">{{time}}</span>
                        <span style="margin-right:20px;float: right;font-size: 14px;height: 20px">{{ form.day }}天</span>
                        <span style="float: right;font-size: 14px;height: 20px"><img style="width: 20px;line-height:20px;height: 20px;display:inline-block;" src="http://10.99.110.223:8889/alert.png" alt=""></span>

                </span>
                </div>

            </div>
        </div>
    </div>
</div>

<!-- import Vue before Element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<script>
    var a=new Vue({
        el: '#app',

        data: function() {
            return {
                checked:[],
                time:"",
                form: {
                    title: '【百度地图推送】',
                    content: '闯关开宝箱100%中奖>>',
                    icon_url:'https://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/map/pic/item/a71ea8d3fd1f4134efd61f37281f95cad0c85e91.jpg',
                    type:[],
                    day:1,
                    msg_center_url:"",
                    url:""


                },
                loading:false,
                exprie:86400,
                fullscreenLoading:false,

            }
        },
        methods:{
            init:function(){
                this.gettime();
                var $this=this
                $.ajax({
                    type: "GET",
                    url: "http://10.99.110.223:8889/push/getcuid.php",
                    success: function(msg) {
                        console.log(msg)
                        var data = JSON.parse(msg)
                        $this.form.type=[]
                        for(i=0;i<data.length;i++){
                            $this.form.type.push(data[i])
                        }
                    }

                })

            },
            handleChange:function () {
                this.$emit('change', this.checked)
                console.log(this.checked)
            },
            gettime:function () {
                var myDate=new Date()
                year=myDate.getFullYear(); //获取完整的年份(4位,1970-????)
                month=myDate.getMonth(); //获取当前月份(0-11,0代表1月)
                date=myDate.getDate(); //获取当前日(1-31)
                hour=myDate.getHours(); //获取当前小时数(0-23)
                min=myDate.getMinutes(); //获取当前分钟数(0-59)
                sec=myDate.getSeconds(); //获取当前秒数(0-59)
                if(sec<10){
                    sec="0"+sec
                }
                if(min<10){
                    min="0"+min
                }
                time=year+"-"+month+"-"+date+" "+hour+":"+min+":"+sec
                this.time=time
            },
            onSubmit:function(){
                var pushname=this.checked
                pushname=pushname.join(":")
                var day=this.form.day
                var pushurl=this.form.url
                var contenturl=this.form.msg_center_url
                var title=this.form.title
                var content=this.form.content
                var icon_url=this.form.icon_url
                if(pushname==""){
                    this.$alert('请选择推送人', "提示",{
                    });
                    return false

                }
                if(day==""){
                    this.$alert('请填写时间', "提示",{
                    });
                    return false

                }
                if(pushurl==""){
                    this.$alert('请填写推送url', "提示",{
                    });
                    return false

                }
                if(icon_url==""){

                    this.$alert('请填写消息中心推送url', "提示",{
                    });
                    return false

                }
                if(title==""){
                    this.$alert('请填写标题', "提示",{
                    });
                    return false

                }
                if(content==""){
                    this.$alert('请填写推送内容', "提示",{
                    });
                    return false

                }
                if(contenturl==""){
                    this.$alert('请填写消息落地页连接', "提示",{
                    });
                    return false
                }
//                var data="pushname="+pushname+"&day="+day+"&pushurl="+pushurl+"&iconurl="+icon_url+"&title="+title+"&content="+content+"&contenturl="+contenturl
                var data={
                    "pushname":pushname,
                    "day":day,
                    "pushurl":pushurl,
                    "iconurl":icon_url,
                    "title":title,
                    "content":content,
                    "contenturl":contenturl,
                }
                this.fullscreenLoading = true;
                var $this=this
                resmsg=""
                $.ajax({
                    type: "Post",
                    data:data,
                    url: "http://10.99.110.223:8889/push/push.php",
                    success: function(msg) {
                        var data = JSON.parse(msg)

                        setTimeout(() => {
                            for(i=0;i<data.length;i++){
                            resmsg+='系统:'+data[i]['system']+"--"+"推送结果:"+data[i]['pushret']
                        }
                        $this.fullscreenLoading = false;
                        $this.$alert(resmsg)
                    }, 1000);

                    },error:function(){
                        setTimeout(() => {
                            $this.fullscreenLoading = false;
                    }, 1000);
                    }

                })
            }
        }

    })
    a.init();
</script>
</html>